<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>神秘的小胖纸</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" type="text/css" href="statics/css/index.css" th:href="@{/statics/css/index.css}" media="all" />
	</head>
	<body class="home blog custom-background round-avatars">
		<div th:replace="~{common/repitation::sider}"></div>
		<div th:replace="~{common/repitation::header}"></div>
		<div id="main1" class="content">
			<div class="container" >
				<article itemscope="itemscope" >
					<div class="posts-list js-posts" th:each="art,loop:${arts}">
						<div class="post post-layout-list" data-aos="fade-up" th:style="${loop.count==1}?'display:':'display:none'" >
							<div class="postnormal review ">
								<div class="post-container review-item">
									<div class="row review-item-wrapper">
										<div class="col-sm-3">
											<a rel="nofollow" href="" th:href="@{/detail/}+${art.id}">
												<div class="review-item-img" style="background-image: url(/statics/images/diego-ph-249471-2-800x1000.jpg);"></div>
											</a>
										</div>
										<div class="col-sm-9 flex-xs-middle">
											<div class="review-item-title">
												<a th:href="@{/detail/}+${art.id}" rel="bookmark" th:text="${art.editorTitle}"></a>
											</div>
											<div class="review-item-creator"><b>发布日期：</b>[[${#dates.format(art.editorDate,'yyyy-MM-dd')}]]</div>
											<span class="review-item-info" ><b>作者：</b>[[${art.editorAuthor}]]</span>
										</div>
									</div>
									<div class="review-bg-wrapper">
										<div class="bg-blur" style="background-image: url(statics/images/diego-ph-249471-2-800x1000.jpg);"></div>
									</div>
								</div>
								<div class="post-container">
									<div th:text="${art.editorTabloid}"></div>
										<div class="post-footer">

										<a class="gaz-btn primary" href="#"  th:href="@{/detail/}+${art.id}">READ MORE</a>
										<span class="total-comments-on-post pull-right"><a>Comments</a></span>
									</div>
								</div>
							</div>
						</div>
					<div class="post post-layout-list" data-aos="fade-up" th:style="${loop.count==2}?'display:':'display:none'">
						<div class="status_list_item icon_kyubo">
							<div class="status_user" style="background-image: url(/statics/images/b0ce3f3cde0c084b6d42321b2dcbc407.jpeg);">
								<div class="status_section">
									<a th:href="@{/detail/}+${art.id}" class="status_btn" th:text="${art.editorTitle}">交代是不可能交代的</a>
									<p class="section_p" th:text="${art.editorTabloid}">相隔上一次 </p>
								</div>
							</div>
						</div>
					</div>
						<div class="post post-layout-list js-gallery" data-aos="fade-up" th:style="${loop.count==3}?'display:':'display:none'">
							<div class="post-album">
								<div class="row content">
									<div class="bg" style="background-image: url(statics/images/IMG_0150.jpg);"></div>
									<div class="contentext flex-xs-middle">
										<div class="album-title">
											<a th:href="@{/detail/}+${art.id}" th:text="${art.editorTitle}">重构图像样式测试</a>
										</div>
										<h5 class="review-item-creator"><b>发布日期：</b>[[${#dates.format(art.editorDate,'yyyy-MM-dd')}]]</h5>
										<div class="album-content" th:text="${art.editorTabloid}">如眼所见是一个图像样式，必须写五十左右的文字作为这个文本框的空白填充，不写也是可以的，强迫症不能容忍空白。</div>
									</div>
									<div class="album-thumb-width flex-xs-middle">
										<div class="row album-thumb no-gutter">
											<div class="col-xs-4"><img class="thumb" src="/statics/images/IMG_0150-250x250.jpg" /></div>
											<div class="col-xs-4"><img class="thumb" src="/statics/images/IMG_0149-250x250.jpg" /></div>
											<div class="col-xs-4"><img class="thumb" src="/statics/images/IMG_0146-250x250.jpg" /></div>
											<div class="col-xs-4"><img class="thumb" src="/statics/images/IMG_0147-250x250.jpg" /></div>
											<div class="col-xs-4"><img class="thumb" src="/statics/images/IMG_0148-250x250.jpg" /></div>
											<div class="col-xs-4">
												<a href="">5 pics</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="post post-layout-list" data-aos="fade-up" th:style="${loop.count==4}?'display:':'display:none'" >
							<div class="postnormal review ">
								<div class="post-container review-item">
									<div class="row review-item-wrapper">
										<div class="col-sm-3">
											<a rel="nofollow" href="" th:href="@{/detail/}+${art.id}">
												<div class="review-item-img" style="background-image: url(/statics/images/penghua.jpg);"></div>
											</a>
										</div>
										<div class="col-sm-9 flex-xs-middle">
											<div class="review-item-title">
												<a th:href="@{/detail/}+${art.id}" rel="bookmark" th:text="${art.editorTitle}"></a>
											</div>
											<div class="review-item-creator"><b>发布日期：</b>[[${#dates.format(art.editorDate,'yyyy-MM-dd')}]]</div>
											<span class="review-item-info" ><b>作者：</b>[[${art.editorAuthor}]]</span>
										</div>
									</div>
									<div class="review-bg-wrapper">
										<div class="bg-blur" style="background-image: url(statics/images/penghua.jpg);"></div>
									</div>
								</div>
								<div class="post-container">
									<div th:text="${art.editorTabloid}"></div>
									<div class="post-footer">

										<a class="gaz-btn primary" href="#"  th:href="@{/detail/}+${art.id}">READ MORE</a>
										<span class="total-comments-on-post pull-right"><a>Comments</a></span>
									</div>
								</div>
							</div>
						</div>
<!--					分页显示-->
					</div>
					<div class="pagination js-pagination">
						<div class="js-next pagination__load">
							<script type="text/javascript" th:src="@{/jquery.min.js}"></script>
							<style>
								a{cursor:pointer;}
								a:hover{color:green;}
								a.active{color:red;}
							</style>
							<a name="pageNum" class="allpage"><b th:text="'共 '+ ${pages.getTotalPages()}+ ' 页'"></b></a>
							<a  th:if="${pages.hasPrevious()} == true" th:href="@{index(currentPage=${pages.previousPageable().getPageNumber()})}"  >上一页</a>
							<a name="pageNum" th:href="@{index(currentPage=${i})}"  th:each="i :${#numbers.sequence(0, pages.getTotalPages()-1)}" th:text="${i+1}" th:class="${pages.getNumber()==i}?'active'" th:if="${i}<3" ></a>
							<a th:text="..."  th:if="${pages.getTotalPages()}>2"></a>
							<a th:text="${pages.getNumber()+1}" th:class="active" th:if="${pages.getNumber()}>2"></a>


							&nbsp;&nbsp;<a name="pageNum" th:if="${pages.hasNext()} == true"  th:href="@{index(currentPage=${pages.nextPageable().getPageNumber()})}" >下一页</a>
							&nbsp;&nbsp;<a th:href="@{'index?currentPage='+ ${pages.getTotalPages()-1}}" >尾页</a>
							<script>
								$("a").click(function(){
									$(this).addClass("active").siblings().removeClass("active");
								})
							</script>
						</div>
					</div>


					<div class="pagination js-pagination">
						<div class="js-next pagination__load">
							<a ><i class="iconfont">&#xe605;</i></a>
						</div>
					</div>
					<!-- -pagination  -->
				</article>
			</div>
		</div>

		<div th:replace="~{common/repitation::footer}"></div>


	</body>

</html>